<template>
  <div class="check-user">
    <Input search enter-button @on-search="serachTableData" placeholder="请输入姓名" class="search-input"/>
    <div class="user-content">
      <Table class="table-content" height="520" border :columns="columns" :data="tableData" @on-select="onSelect"
             @on-select-cancel="onSelectCancel"
             @on-select-all="onSelectAll" @on-select-all-cancel="onSelectAllCancel"></Table>
    </div>
    <div class="modal-page">
      <Page :total="page.total"
            :current="page.current"
            :page-size="page.size"
            size="small"
            @on-change="pageChange"
            @on-page-size-change="sizeChange"
            show-sizer
            show-total/>
    </div>
    <div class="modal-btn">
      <Button @click="closeModal">取消</Button>
      <Button type="primary" @click="sureUser">确定</Button>
    </div>
  </div>
</template>

<script>
import * as API from "@/api/sys-user.js";

export default {
  name: "check-user",
  props: {
    isSingle: {
      type: Boolean,
      default: false
    },
    deptId: {
      type: String,
      default: ""
    },
    checkedArr:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      chooseUser: {
        id: ""
      },
      page: {
        total: 0,
        current: 1,
        size: 10
      },
      tableData: [],
      tempArr: [],
    }
  },
  computed: {
    columns() {
      let columnArr = [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '性别',
          render: (h, params) => {
            return h('span', params.row.gender === "1" ? "男" : "女");
          }
        },
        {
          title: '手机号',
          key: 'phoneNum'
        },
      ]
      columnArr.unshift(this.isSingle ? {
        title: '选择',
        width: 60,
        align: 'center',
        render: (h, params) => {
          let flag = this.chooseUser.id === params.row.id;
          const that = this
          return h('div', [
            h('Radio', {
              props: {
                value: flag
              },
              on: {
                'on-change': () => {
                  that.chooseUser = params.row;
                }
              }
            })
          ])
        }
      } : {
        type: 'selection',
        width: 60,
        align: 'center'
      })
      return columnArr
    }

    ,
  },
  methods: {
    //获取表格数据
    getTableData() {
      API.getUserList({
        page: {
          current: this.page.current,
          size: this.page.size
        },
        name: this.searchName,
        deptId: this.deptId
      }).then(res => {
        if (res.code === "0") {
          this.page.total = parseInt(res.data.total)
          if (this.tempArr || this.deptId) {
            let selectedArr = []
            res.data.records.forEach(e => {
              if (this.deptId && this.deptId === e.deptId){
                e['_checked'] = true
                selectedArr.push(e)
              }
              this.tempArr.forEach(item => { // 判断本页数据状态
                if (item.id === e.id) {
                  e['_checked'] = true
                }
              })
            })
            this.tempArr = this.tempArr.concat(selectedArr)
          }
          this.tableData = res.data.records
        }
      })
    },
    pageChange(page) {
      this.page.current = page
      this.getTableData()
    },
    sizeChange(size) {
      this.page.current = 1
      this.page.size = size
      this.getTableData()
    },
    onSelect(selection, row) {
      this.tempArr.push(row) // 将该条数据添加到tempArr中
      this.tableData.forEach(item => { // 本页数据中找到该条勾选数据并添加属性_checked = true
        if (item.id === row.id) {
          item['_checked'] = true
        }
      })
    },

    /**
     * @param {*} selection 已选项数据
     * @param {*} row 刚取消选择的项数据
     * @description 取消table某一项时触发
     */
    onSelectCancel(selection, row) {
      this.tempArr.forEach((item, index) => { // tempArr中找到该条数据并删除
        if (row.id === item.id) {
          this.tempArr.splice(index, 1)
        }
      })
    },

    /**
     * @param {*} selection 已选项数据
     * @description table全选时触发
     */
    onSelectAll(selection) {
      selection.forEach(item => { // 将本页全部勾选添加到tempArr中
        this.tempArr.push(item)
      })
      this.tempArr = Array.from(new Set(this.tempArr)) // 去重
    },

    /**
     * @param {*} selection 已选项数据
     * @description table取消全选时触发
     */
    onSelectAllCancel(selection) {
      this.tableData.forEach(item => { // tempArr中找到该条数据并删除
        this.tempArr.forEach((e, index) => {
          if (item.id === e.id) {
            this.tempArr.splice(index, 1)
          }
        })
      })
    },

    //搜索
    serachTableData(value) {
      this.searchName = value
      this.page.current = 1
      this.getTableData()
    },


    //关闭弹窗
    closeModal() {
      this.$emit("close-modal")
    },

    //关闭弹窗
    sureUser() {
      let returnData;
      if (this.isSingle) {
        if (this.chooseUser && this.chooseUser.id) {
          returnData = this.chooseUser
        } else {
          this.$Message.warning("请选择人员！")
          return
        }
      } else {
        if (this.tempArr && this.tempArr.length > 0) {
          returnData = this.tempArr
        } else {
          if (this.deptId){
            returnData = []
          }else{
            this.$Message.warning("请选择人员！")
            return
          }
        }
      }
      this.$emit("sure-back", returnData)
    }
  },
  created() {
    if (this.checkedArr){
      this.tempArr = this.checkedArr
    }
    this.getTableData()
  }
}
</script>

<style lang="less" scoped>
.check-user {
  .user-content {
    height: 525px;
    overflow: auto;
    margin: 10px 0px 10px 0px;
  }

  .modal-page {
    left: 100px;
    bottom: -10px;
    width: 100%;
    height: 50px;
    text-align: center;
  }
}
</style>
